<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>条件判断</title>
    </head>
    <body>
        <div id="app">
            <h2 v-if='isShow'>{{message}}</h2>
            <h1 v-else="v-else">isShow 为 false 显示</h1>
            <h2 v-if='score >= 90'>优秀</h2>
            <h2 v-else-if='score >= 80'>良好</h2>
            <h2 v-else-if='score >= 60'>及格</h2>
            <h2 v-else="v-else" style='color: red'>不及格</h2>

            <!-- 当需要在显示和隐藏之间切片很频繁时，使用 v-show -->
            <!-- 当只有一次切换时, 使用 v-if -->
            <h2 v-show="isShow">v-if 为false的时候根本不会渲染, v-show 为 false 的时候只会设置 display 为 none</h2>
        </div>

        <!-- 用户登录切换 -->
        <div id="login">
            <span v-if="isUser">
                <!-- for属性指向点击该标签时聚焦的位置 -->
                <label for="username">
                    用户账号:
                </label>
                <input id="username" type="text" name="username" placeholder="请输入用户名称" key="username">
            </span>
            <span v-else="v-else">
                <label for="email">用户邮箱:
                </label>
                <input id="email" type="text" name="email" placeholder="请输入电子邮箱" key="email">
            </span>
            <!-- Vue 在进行DOM渲染, 由于性能考虑, 会尽可能复用已经存在的元素，而不是重新创建新的元素 -->
            <!-- Vue 内部(虚拟DOM)会发现原来的 input 元素不再使用，直接作为 else 的input 来使用了 -->
            <!-- 可以使用不同的 key 属性来规避这个问题 -->
            <button type="button" name="切换类型" @click='changeType'>切换类型</button>
        </div>
    </body>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {
                message: 'HelloWorld',
                isShow: false,
                score: 60
            }
        });

        const login = new Vue({
            el: '#login',
            data: {
                isUser: true
            },
            methods: {
                changeType() {
                    this.isUser = !this.isUser;
                }
            }
        });
    </script>
</html>
